<!--
 * @Author: 谢陈洁
 * @Date: 2025-07-07 13:17:32
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-08-01 10:02:42
 * @Description: file content
-->
<template>
  <div class="page">
    <el-card class="table-card">
      <div class="action-box">
        <add-button @click="handleAdd">添加分类</add-button>
      </div>
      <pro-table :columns="columns" :data="categoryList">
        <template #action="{ row }">
          <edit-button size="small" @click="handleEdit(row)">编辑</edit-button>
          <del-button size="small" @click="handleDelete(row.id)">删除</del-button>
        </template>
      </pro-table>
      <base-dialog
        v-model="dialogVisible"
        @ok="handleSubmit"
        title="编辑分类"
        @cancel="dialogVisible = false"
      >
        <dynamic-form
          ref="formRef"
          :form-config="formConfig"
          v-model="formData"
          @submit-success="handleSubmitSuccess"
        ></dynamic-form>
      </base-dialog>
    </el-card>
  </div>
</template>
<script setup lang="ts">
  import { deleteLinkCategory, saveLinkCategory } from '@/services/apis/tools/website'
  import { columns, formConfig } from './config'
  import { useWebsiteStore } from '@/stores/websiteStore'
  import { storeToRefs } from 'pinia'
  import { useDeleteConfirm, useFormDialog, useTableData } from '@/hooks'
  const websiteStore = useWebsiteStore()
  const { categoryList } = storeToRefs(websiteStore)
  const { fetchData } = useTableData(websiteStore.fetchCategories, { hasPagination: false })
  const { formRef, dialogVisible, formData, handleSubmit, handleSubmitSuccess } = useFormDialog(
    saveLinkCategory,
    fetchData
  )
  const { handleDelete } = useDeleteConfirm(
    deleteLinkCategory,
    fetchData,
    '确定删除吗？删除分类将会删除该分类下的所有链接'
  )

  const handleAdd = () => {
    dialogVisible.value = true
  }
  const handleEdit = (row: any) => {
    formData.value = row
    dialogVisible.value = true
  }
  onMounted(() => {
    fetchData()
  })
</script>
<style lang="scss" scoped></style>
